import React, { Component } from 'react';
// import { Link } from 'react-router-dom';
import axios from 'axios'

class SignUpList extends Component {
  constructor (props) {
    super (props)
    this.handleToogle = this.handleToogle.bind(this);
    this.state = {
      activeIndex: -1,
      companyList: []
    }
  }
  handleToogle (index) {
    this.setState((prevState) =>{
      if (index === prevState.activeIndex){
        prevState.activeIndex = -1
      }
      else {
        prevState.activeIndex = index
      }
      return {
        activeIndex: prevState.activeIndex
      }
    })
  }

  componentWillMount () {
    const that = this;
    let  content =  []
    axios.get('http://80days.lockinchina.com/apib/eightyDay/eightyDayLocalActivityList').then(function(res){
      const data = res.data;  
      if(data.code === 200){
        content = data.data
        that.setState(() => {
          return {
            companyList: content
          }
        })
      }
    })
  }

  render () {
    return (
      <div>
          <div className="sign-js">
            <img className="fullim" alt="" src={require('../static/images/sign.png')} />
            <div className="m-t-4">
              <h4 className="m-b-3">校园求职 Workshop</h4>
              <p>不知道自己毕业后适合做什么？</p>
              <p>简历应该怎么写？</p>
              <p>应届生在几月投递简历最合适？</p>
              <p>想亲身体验个人面试、小组面试？</p>
              <p className="m-t-3 m-b-3">快来找到你所在的城市，报名<span>校园求职workshop</span>还有可能遇到名企HR宣讲！！</p>
              <h4 className="m-b-3">校园面试报名会</h4>
              <p>想在毕业前，参加国内名企的招聘会？</p>
              <p>想面对面向企业HR推荐自己？</p>
              <p>想在一次活动上，多见到几家雇主？</p>
              <p className="m-t-3">赶快点击下列城市列表，报名参加我们为你在校园里举办的</p>
              <p><span>海外校园名企面试会</span></p>
            </div>
          </div>
          <ul className="school-list">
            {this.getList()}
          </ul>
      </div>
    )
  }

  getList () {
    const list  = this.state.companyList
    return list.map((item,index) => {
      return (
        <li
          className={this.state.activeIndex === index ? 'actived' : ''}
          
          key={item.id}
          style={{display: (item.list.length === 0 ? "none" : "block" )}}
        >
          <div onClick={() => this.handleToogle(index)} className="s-title animated">{item.title}</div>
          <div className="s-list animated">
            {
              item.list.map((child,index) => {
                const nowDate = new Date().getTime();
                const finishDate = new Date(child.deadline).getTime();
                const isOverdue = (finishDate - nowDate < 0)  ? true : false
                return (
                  <p 
                    className = {isOverdue ? 'overdue' : ''} 
                    key={index} 
                    onClick={() => { window.location="http://job.lockinchina.com/network/detail?id="+child.linkId }}
                  >
                    {child.name}
                  </p>
                )
              })
            }
          </div>
        </li>
      ) 
    })
  }
}

export default SignUpList